<template>
	<view class="audio-player">
		<div class="audiobox" @click="togglePlay">
			<div class="abox" v-if="!isPlay">
				<text>点击开始听力考试</text>
				<image src="@/static/img/kaibi_icn@2x.png" mode=""></image>
			</div>
			<div class="abox play" v-if="isPlay">
				<text>请认真听读音</text>
				<image src="@/static/img/tingli_icn@2x.png" mode=""></image>
			</div>
		</div>
		
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, onUnmounted, ref, reactive, toRefs, computed, defineProps, defineEmits, watch } from 'vue';


	// 使用defineProps定义接收的props
	const props = defineProps({
		src: {
			type: String,
			default: ''
		},
	});


	const ctx = uni.createInnerAudioContext()
	console.log()
	// const volume = ref(ctx.volume)
	const isPlay = ref(false)
	// 音频播放/暂停
	const togglePlay = () => {
		isPlay.value = !isPlay.value
		if (isPlay.value) {
			ctx.autoplay = true;
			console.log(props)
			ctx.src = props.src
			ctx.play();
		} else {
			ctx.stop();
		}
	}
	const stopAudio = () => {
		ctx.stop();
	}


	onMounted(() => {
		isPlay.value = false;
		ctx.stop();
		ctx.onError((res) => { })
		ctx.onPause((res) => { })
		ctx.onPlay((res) => { })
		ctx.onStop((res) => { })
		ctx.onEnded((res) => { isPlay.value = false; })
	})

	onUnmounted(() => {
		ctx.stop();
		ctx.offEnded()
		ctx.offPause()
		ctx.offPlay()
		ctx.offSeeked()
		ctx.offTimeUpdate()
		ctx.offCanplay()
		ctx.offEnded()
		ctx.destroy()
	})
</script>

<style lang="scss" scoped>
	.audiobox {
		width: 100%;
		padding: 20rpx;
		display: flex;
		// justify-content: center;
		// align-items: center;

		.abox {
			min-width: 360rpx;
			padding: 18rpx 52rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(0, 34, 136, 0.05);
			border-radius: 36rpx;

			text {
				color: #002288;
				font-size: 26rpx;
				font-weight: 550;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}
		}

		.play {
			background: rgba(0, 34, 136, 0.2);
		}
	}
</style>